<template>
	<view class="find" :style="{paddingTop:statusHeight+'px'}">
		<!-- 头部导航栏 -->
		<view class="find-topbar" :style="{top:statusHeight+'px'}">
			<view @tap="changeTabBar(index)" :class="current==index?'find-topbar-item active':'find-topbar-item'" v-for="(item,index) in topBarList" :key="item">
				{{item}}
			</view>
		</view>
		<!-- 文章 -->
		<view v-if="current==0" class="find-artivallist">
			<view @tap="getArticalDetail(item.id)" class="find-artivallist-item" v-for="item in list" :key="item.id">
				<view class="find-artivallist-item-topcontainer">
					<image  class="find-artivallist-item-topcontainer-img" :src="item.coverImg"></image>
					<view  class="find-artivallist-item-topcontainer-title"> {{item.title}}</view>
					<view  class="find-artivallist-item-topcontainer-author"> {{item.author}}</view>
				</view>
				<view class="find-artivallist-icons">
					<uni-icons class="iconfont find-artivallist-icons-icon"  custom-prefix="iconfont" type="icon-liulanliang-copy" color="#333" size="20"></uni-icons>
					<view class="find-artivallist-icons-num">{{item.viewCount}}</view>
					
					<view @tap.stop="collectStar(item)">
						<uni-icons  :color="item.collected?'red':'#333'"  class="find-artivallist-icons-icon"  type="star"
							size="20"></uni-icons>	
					</view>
				</view>
				
			</view>
		</view>	
		
		<!-- 品牌 -->
		<view v-if="current==1" class="find-brandlist">
			<view class="find-brandlist-item" v-for="item in list" :key="item.id">
				<image class="find-brandlist-item-img" :src="item.logo" ></image>
				<view class="find-brandlist-item-name">{{item.name}}</view>
				<view class="find-brandlist-item-story">{{item.brandStory}}</view>
			</view>
		</view>	
		<view class="more" v-if="moreIsHas">没有更多了...</view>
	</view>
</template>

<script>
	import mixin from '../../mixin/index.js'
	import {
		showTip
	} from '../../utils/index.js'
	import { 
	findBrandsByPage as findBrandsByPageApi,
	findArticleByPage as findArticleByPageApi,
	productArticle as productArticleApi
	} from '../../api/find/index.js'
	export default {
		name:'Find',
		data() {
			return {
				topBarList:['精选文章','品牌列表'],//topBar的值
				current:0,//topBar现在处位置的索引
				start:1,//第几页的数据
				limit:5,//一页多少条数据
				total:0,//数据一共有几条
				moreIsHas:false,
				list:[],
				statusHeight:0
				
			}
		},
		mixins:[mixin],
		onLoad(){
			
			this.getArtical(this.current);
			this.statusHeight=uni.getStorageSync('statusHeight')?uni.getStorageSync('statusHeight'):0
			
		},
		onReady(){
			
		},
		//触底反弹钩子函数
		onReachBottom(){
			if(this.list.length<this.total){
				this.start++;
				this.getList(this.current);
			}else{
				this.moreIsHas=true;
			}
		},
		methods:{
			//点击收藏
			collectStar(item){
				
				if(this.checkLoginStatus()){//已经登录过
					var articalArr=uni.getStorageSync('articalArr');
					if(item.collected){//商品处于收藏状态
						var idx=articalArr.findIndex(ele=>ele.id==item.id);
						articalArr.splice(idx,1);
						uni.setStorageSync('articalArr',articalArr);
						item.collected=false;
						showTip('取消收藏','success');
						
					}else{//商品处于未收藏状态
						if(articalArr.length==0){
							articalArr=[];
						}
						articalArr.push(item);
						item.collected=true;
						uni.setStorageSync('articalArr',articalArr);
						showTip('收藏成功','success');
					}
				}
			},
			//重置
			reset(){
				this.start=1;
				this.moreIsHas=false;
				if(this.current==0){
					this.limit=3;
				}else{
					this.limit=2;
				}
				this.list=[];
				this.getList(this.current);
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				});
			},
			//获取页面数据
			getList(current){
				if(current==0){
					this.getArtical();
				}else{
					this.getBrand();
				}
			},
			//获取文章详情页面
			getArticalDetail(id){
					uni.navigateTo({
						url:`/pages/find/articalDetail/articalDetail?articalId=${id}`
					})
			},
			//获取文章数据
			getArtical(){
				findArticleByPageApi(this.start,this.limit)
				.then(res=>{
					this.total=res.data.total;
					var tempArr=res.data.rows;
					tempArr.forEach(ele=>{
						ele.collected=false;
					})
					this.list.push(...tempArr);
					var articalArr=uni.getStorageSync('articalArr');
					if(articalArr.length){
						var articalIds=articalArr.map(ele=>ele.id);
						this.list.forEach(ele=>{
							if(articalIds.includes(ele.id)){
								ele.collected=true;
							}
						})
					}
					
				})
			},
			//获取品牌数据
			getBrand(){
				findBrandsByPageApi(this.start,this.limit)
				.then(res=>{
					this.total=res.data.total;
					this.list.push(...res.data.rows);
				})
			},	
			//改变topBar索引
			changeTabBar(idx){
				this.current=idx;
				this.reset();
			}
		}
	}
</script>

<style lang="scss" scoped>
.find{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #f1ece7;
	padding-bottom: 20rpx;
	&-topbar{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		background-color: #354e44;
		color: #FFFFFF;
		&-item{
			position: relative;
			margin:0 10rpx;
			&::after{
				position: absolute;
				display: none;
				content: "";
				width: 100%;
				height: 3rpx;
				bottom:-10rpx ;
				background-color: #bdc5c2;
			}
			&.active::after{
				display: block;
			}
		}
	}
	
	//文章
	&-artivallist{
		box-sizing: border-box;
		width: 100%;
		padding: 100rpx 38rpx 30rpx;
		&-item{
			overflow: hidden;
			height: 482rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			&-topcontainer{
				position: relative;
				height: 382rpx;
				color:#FFFFFF;
				&-img{
					display: block;
					width: 100%;
					height: 100%;
				}
				&-title{
					position: absolute;
					bottom:70rpx;
					left:30rpx;
					font-size: 50rpx;
				}
				&-author{
					position: absolute;
					bottom:20rpx;
					left:30rpx;
					font-size: 30rpx;
				}
				
			}
			.find-artivallist-icons{
				display: flex;
				box-sizing: border-box;
				padding: 0 30rpx;
				height: 100rpx;
				line-height: 100rpx;
				justify-content: space-between;
				align-items: center;
				line-height: 60rpx;
				
				&-num{
					flex: 1;
					margin-left: 30rpx;
				}
			}
		}
	}

	//品牌
	.find-brandlist{
		box-sizing: border-box;
		width: 100%;
		padding: 100rpx 38rpx 30rpx;
		&-item{
			height: 622rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			text-indent: 15rpx;
			&-img{
				display: block;
				height: 480rpx;
			}
			&-name{
				font-weight: 700;
				font-size: 36rpx;
			}
			&-story{
				font-size: 28rpx;
				color:#b1b1b1;
			}
		}
	}
	.more{
		text-align: center;
	}
}
</style>
